<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2646654_d87nflpimvt.css">
    <link rel="stylesheet" href="../css/common_h&f.css">
    <link rel="stylesheet" href="../css/goodsList.css">
    <link rel="stylesheet" href="../css/search.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        img {
            vertical-align: top;
        }

        .cl::after {
            content: "";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .list {
            width: 1226px;
            margin: 0 auto;
            min-height: 608px;
        }

        .list li {
            width: -webkit-calc(100% / 4);
            float: left;
            padding: 10px;
            border: 1px solid #f0f0f0;
            box-sizing: border-box;
        }

        .list li:hover {
            box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.5);
        }

        .list li a {
            display: block;
            text-align: center;
        }

        .list li img {
            /* width: 80%; */
            width: 280px;
            height: 280px;
            margin: 4px auto;
        }

        .info {
            font-size: 16px;
            line-height: 48px;
            height: 48px;
            /* 多行文本溢出隐藏 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .price {
            color: #f43;
            font-weight: 600;
            font-size: 18px;
        }

        p .xiaoliang {
            font-size: 12px;
            color: #999;
            font-weight: 100;
            margin-left: 138px;
        }

        .search_bar {
            margin: 20px auto;
        }

        .pageBox {
            width: max-content;
            margin: 0 auto;
            margin-top: 20px;
        }

        .summary {
            background-color: #f3f3f3;
        }

        .pageBox .prev,
        .next {
            width: 45px;
            height: 40px;
            border: 1px solid #ebebeb;
            margin-left: -1px;
            color: #8a8a8a;
            display: inline-block;
            line-height: 40px;
            text-align: center;
            font-size: 15px;
            text-decoration: none;
            margin: 0 2px;
            border-radius: 6px;
            cursor: pointer;
        }

        .pageBox .prev:hover {
            border: 1px solid #884e22;
            color: #884e22;
        }

        .pageBox .next:hover {
            border: 1px solid #884e22;
            color: #884e22;
        }

        .pageBox .pageTips {
            line-height: 42px;
            display: inline-block;

        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-top">
            <div class="header-top0 w1">
                <div class="headerLeft">
                    <p>
                        <span>嗨，欢迎来订花乐！</span>
                    <div class="inline">
                        <span class="linkwc">
                            <i class="iconfont icon-weixin"></i>
                            关注微信
                        </span>
                        <p class="imgHide">
                            <img class="wechat0" src="https://cs.dinghuale.com/uploads/20200706/202007061732083685.jpg"
                                alt="">
                        </p>
                    </div>

                    </p>
                </div>
                <div class="headerRight">
                    <span class="tips">
                        <a href="./reg&login.html">你好，请登录</a>
                        <a href="./reg&login.html">免费注册</a>
                    </span>
                    |
                    <a href="">订单查询</a>
                    |
                    <a href="./shoppingCar.html">
                        <i class="iconfont icon-gouwuche"></i>
                        购物车
                        <!-- <span class="carnum">
                            (0)
                        </span> -->
                    </a>
                    |
                    <div class="inline">
                        <a href="javaScript:;">手机下单</a>
                        <span class="imgHide">
                            <img class="wechat1" src="https://upyun.dinghuale.com/public/images/xiaochengxu.png" alt="">
                        </span>

                    </div>
                </div>
            </div>
        </div>
        <div class="header-mid w1">
            <div class="barLeft fl">
                <a href="../index11.html">
                    <img src="https://upyun.dinghuale.com/uploads/images/logo.png" alt="">
                </a>
            </div>
            <div class="barMid fl">
                <div class="search-bar">
                    <input type="text" name="" id="" class="search-inp" placeholder="请输入要搜索的关键字"><button
                        class="search-btn"><i class="iconfont icon-49"></i></button>
                </div>
                <div class="search-key">
                    <a href="">红玫瑰</a>
                    <span>|</span>
                    <a href="">蛋糕</a>
                    <span>|</span>
                    <a href="">百合</a>
                    <span>|</span>
                    <a href="">康乃馨</a>
                    <span>|</span>
                </div>
            </div>
            <div class="barRight">
                <i class="iconfont icon-dianhua_2"></i>
                <span>400-060-1520</span>
            </div>
        </div>
        <div class="header-footer w cl df">
            <div class="header-footerL">
                <div class="headerL df ">
                    <p>全部商品分类</p>
                    <i class="iconfont icon-xiangxia"> </i>
                </div>
                <div class="headerHide">
                    <div>
                        <p>用途</p>
                        <ul class="">
                            <a href="">爰情鲜花</a>
                            <a href="">生日鲜花</a>
                            <a href="">友情鲜花</a>
                            <a href="">探病问候</a>
                            <a href="">道歉鲜花</a>
                            <a href="">问候长辈</a>
                            <a href="">感谢老师</a>
                            <a href="">哀思鲜花</a>
                            <a href="">商务鲜花</a>
                        </ul>
                    </div>
                    <div>
                        <p>花材</p>
                        <ul class="">
                            <a href="">玫瑰</a>
                            <a href="">百合</a>
                            <a href="">康乃馨</a>
                            <a href="">向日葵</a>
                            <br>
                            <a href="">满天星</a>
                            <a href="">郁金香</a>
                            <a href="">菊花</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                    <div>
                        <p>类别</p>
                        <ul class="">
                            <a href="">花束</a>
                            <a href="">礼盒</a>
                            <a href="">蛋糕</a>
                            <a href="">花篮</a>
                            <a href="">绿植</a>
                            <a href="">周花</a>
                            <a href="">手提花篮</a>
                            <a href="">桌花</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                    <div>
                        <p>枝数</p>
                        <ul class="laa">
                            <a href="">11枝</a>
                            <a href="">19枝</a>
                            <a href="">21枝</a>
                            <a href="">33枝</a>
                            <br>
                            <a href="">52枝</a>
                            <a href="">66枝</a>
                            <a href="">99枝</a>
                            <a href="">其他</a>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="navList cl ">
                <a href="">鲜花</a>
                <a href="">花束</a>
                <a href="">礼盒</a>
                <a href="">蛋糕</a>
                <a href="">花篮</a>
                <a href="">绿植</a>
                <a href="">周花</a>
            </div>
        </div>
    </div>
    <hr>
    </hr>
    <div class="goodsSeleList cl">
        <div class="goodsSeleListBar w">
            <div>
                <a href="">首页&emsp;</a>
                ><span>鲜花</span>
            </div>
            <div class="goodsSeleListMain">
                <div>
                    <li>
                        <img src="https://cs.dinghuale.com/uploads/20200615/202006151134064029.png" alt="">
                        <span>用途</span>
                    </li>
                    <li>爱情鲜花</li>
                    <li>生日鲜花</li>
                    <li>友情鲜花</li>
                    <li>探病问候</li>
                    <li>道歉鲜花</li>
                    <li>问候长辈</li>
                    <li>感谢老师</li>
                    <li>哀思鲜花</li>
                    <li>商务鲜花</li>
                </div>
                <div>
                    <li>
                        <img src="https://cs.dinghuale.com/uploads/20200615/202006151136103227.png" alt="">
                        <span>花材</span>
                    </li>
                    <li>玫瑰</li>
                    <li>百合</li>
                    <li>康乃馨</li>
                    <li>向日葵</li>
                    <li>满天星</li>
                    <li>郁金香</li>
                    <li>菊花</li>
                    <li>其他</li>
                </div>
                <div>
                    <li>
                        <img src="https://cs.dinghuale.com/uploads/20200615/202006151135191508.png" alt="">
                        <span>类别</span>
                    </li>
                    <li>花束</li>
                    <li>礼盒</li>
                    <li>蛋糕</li>
                    <li>花篮</li>
                    <li>绿植</li>
                    <li>周花</li>
                    <li>手提花篮</li>
                    <li>桌花</li>
                    <li>其他</li>
                </div>
                <div>
                    <li>
                        <img src="https://cs.dinghuale.com/uploads/20200615/202006151136201615.png" alt="">
                        <span>枝数</span>
                    </li>
                    <li>11枝</li>
                    <li>19枝</li>
                    <li>21枝</li>
                    <li>33枝</li>
                    <li>52枝</li>
                    <li>66枝</li>
                    <li>99枝</li>
                    <li>其他</li>
                </div>
            </div>
            <div class="goodsSeleListFooter cl">
                <div class="kongbai"></div>
                <div>
                    <li>综合排序</li>
                    <li>销量
                        <i class="iconfont icon-xiangxia"> </i>
                    </li>
                    <li>最新</li>
                    <li>价格
                        <i class="iconfont icon-xiangxia"> </i>
                    </li>
                </div>
            </div>
        </div>
    </div>
    <div class="kongbai cl"></div>
    <form class="search_bar w" onsubmit="return false">
        <!-- <div class="searchBox">
            <input type="text" class="searchCon">
            <button class="searchBtn">搜索</button>
        </div> -->
        <div class="orderBox">

            <div class="orderColBox">
                <label>
                    编号
                    <input type="radio" checked="" name="orderCol" class="orderCol" value="id">
                </label>
                <label>
                    名称
                    <input type="radio" name="orderCol" class="orderCol" value="goodsName">
                </label>
                <label>
                    价格
                    <input type="radio" name="orderCol" class="orderCol" value="goodsPrice">
                </label>
            </div>

            <div class="orderTypeBox">
                <label>
                    升序
                    <input type="radio" checked="" name="orderType" class="orderType" value="asc">
                </label>
                <label>
                    降序
                    <input type="radio" name="orderType" class="orderType" value="desc">
                </label>
            </div>
            <div class="showNumBox">
                <select class="select">
                    <option value="8" selected="">每页显示8条</option>
                    <option value="16">每页显示16条</option>
                    <option value="24">每页显示24条</option>
                    <option value="32">每页显示32条</option>
                </select>
            </div>
            <input type="reset" class="resetBtn" value="重置">
        </div>
    </form>

    <div class="list cl">

    </div>
    <div class="pageBox">
        <span class="prev">&lt;</span>
        <span class="pageTips"></span>
        <span class="next">&gt;</span>
    </div>
    <div class="footer cl">

    </div>
</body>
<script src="../js/common_h&f.js"></script>
<script>
    //引入尾部
    $(".footer").load("./common_footer.html");

    $(".search-key a").attr("href", "./goodsList.html");
    $(".headerHide a").attr("href", "./goodsList.html");
    $(".navList a").attr("href", "./goodsList.html");

    //标识用户身份
    var tips = document.getElementsByClassName("tips")[0];
    var user = getCookie("lgc");
    if (user) {
        tips.innerHTML = `欢迎您,${user} <a onsubmit="return false" onclick="exit()">退出</a>`;
    }
    function exit() {
        delCookie("lgc");
        location.reload();
    }

    $(function () {
        // 二级菜单显隐效果
        $(document).on("mouseenter", function () {
            $(".headerL").mouseenter(function () {
                $(".headerHide").css({ display: "block" });
            })
            $(".header-footerL").mouseleave(function () {
                $(".headerHide").css({ display: "none" });
            })
        })

        //功能start
        var searchCon = document.getElementsByClassName("search-inp")[0];
        var searchBtn = document.getElementsByClassName("search-btn")[0];
        var searchBar = document.getElementsByClassName("search-bar")[0];
        var select = document.getElementsByClassName("select")[0];

        var prev = document.getElementsByClassName("prev")[0];
        var next = document.getElementsByClassName("next")[0];
        var pageTips = document.getElementsByClassName("pageTips")[0];

        var ul = document.getElementsByClassName("list")[0];

        var key = ""; // 全局变量,记录关键词(默认 "")
        var orderCol = "id";//全局变量,排序的列名(默认 "id")
        var orderType = "asc";// 全局变量,排序的列名(默认 "asc")
        var pageIndex = 1;//全局变量 保存页码（第几页）
        var showNum = 8;//全局变量 每页显示多少条


        loadGoods()
        document.onclick = function () {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            if (target.className == "search-btn") {
                var searchCon = target.previousElementSibling;
                key = searchCon.value;
                loadGoods();
            } else if (target.className == "orderCol") {
                orderCol = target.value;
                // console.log(orderCol);
                loadGoods();
            } else if (target.className == "orderType") {
                orderType = target.value;
                // console.log(orderType);
                loadGoods();
            }
        }
        select.onchange = function () {
            showNum = this.value;
            loadGoods()
        }
        function loadGoods() {

            searchGoodsOrderLimit({ key, orderCol, orderType, pageIndex, showNum }).then(function (result) {
                var { status, detail, list, total, maxPage } = result;
                if (status) {
                    var html = "";
                    list.forEach(function (item) {
                        var { id, goodsId, goodsName, goodsPrice, goodsImg } = item;
                        html += `
                        <li>
                            <a href="./goodsDetail.html?gid=${goodsId}">
                                <img src="${goodsImg}"
                                alt="">
                            </a>
                            <p class="info">${goodsName}</p>
                            <p class="price">￥<span>${goodsPrice}</span><span class="xiaoliang">销量1129笔</span></p>
                        </li>`
                    })
                    ul.innerHTML = html;

                    pageTips.innerHTML = `${pageIndex}/${maxPage}&emsp;共&ensp;${total}&ensp;条`;


                    prev.onclick = function () {
                        if (pageIndex <= 1) return false;
                        pageIndex--;
                        pageTips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;
                        loadGoods();
                    }

                    next.onclick = function () {
                        if (pageIndex >= maxPage) return false;
                        pageIndex++;
                        pageTips.innerHTML = `${pageIndex}/${maxPage},共${total}条`;
                        loadGoods();
                    }
                } else {
                    ul.innerHTML = "暂无商品";
                }
            })
        }
        function exit() {
            delCookie("lgc");
            location.reload();
        }
    })
        //功能end





</script>

</html>